<template>
  <div class="user-edit-container">
    <h2>{{ id ? "编辑" : "新增" }}</h2>

    <el-form ref="formRef" :model="form" label-width="100px" :rules="rules">
      <el-form-item label="资源名称" prop="ResourceName">
        <el-input v-model="form.resName" />
      </el-form-item>
      <el-form-item label="资源类别" prop="resTypeName">
        <el-select
          v-model="form.dynamic"
          placeholder="请选择资源类别"
          style="width: 240px"
        >
          <el-option
            v-for="item in dynamicsoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="资源类型名称" prop="resTypeName">
        <el-select
          v-model="form.resType"
          placeholder="请选择资源类型名称"
          style="width: 240px"
        >
          <el-option
            v-for="item in Typeoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="资源描述" prop="resDes">
        <el-input v-model="form.resDes" />
      </el-form-item>
      <!-- <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio label="active">启用</el-radio>
          <el-radio label="inactive">禁用</el-radio>
        </el-radio-group>
      </el-form-item> -->
      <div v-if="form.dynamic == 1">
        <dynamicsNat
          :disabled="false"
          v-model:id="id"
          ref="dynamicsNatRef"
          v-model:resId="form.resId"
          :data="form"
        ></dynamicsNat>
        <div class="button-row">
          <el-button type="success" @click="runForm">运行</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button @click="cancel">取消</el-button>
        </div>
      </div>
      <el-form-item label="资源内容" prop="resText" style="height: 100%">
        <Tinymce
          v-model="form.resText"
          :disabled="form.dynamic == 1"
          :data="form"
          v-model:id="id"
          @onClick="handleClick"
        />
      </el-form-item>

      <el-form-item v-if="form.dynamic != 1">
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup name="naturalRes-edit">
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  resourceinfo,
  resourceinfoDynamic,
  resourceinfosaveText,
  resourceinfoUpdate,
} from "@/api/naturalRes";
import { ElMessage } from "element-plus";
import dynamicsNat from "./dynamicsNat.vue";
import Tinymce from "./Tinymce.vue";

const Typeoptions = reactive([
  {
    value: "1003",
    label: "表格",
  },
  {
    value: "1002",
    label: "图片",
  },
  {
    value: "1001",
    label: "文字",
  },
]);

const dynamicsoptions = reactive([
  {
    value: 1,
    label: "动态资源",
  },
  {
    value: 0,
    label: "静态资源",
  },
]);

const router = useRouter();
const route = useRoute();
const id = ref(route.params.id);
const dynamicsNatRef = ref(null);
const formRef = ref(null);
const form = reactive({});

const rules = reactive({
  name: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" },
  ],
  age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
  address: [
    {
      required: true,
      message: "请输入地址",
      trigger: "blur",
      resText: "请输入",
    },
  ],
});

// 如果是编辑，加载用户数据
onMounted(() => {
  if (id.value && id.value !== "0" && id.value != "add") {
    loadUserData();
  }
});

// 加载用户数据
const loadUserData = async () => {
  // 这里应该是API请求，我们模拟一下
  const mockData = await resourceinfo(id.value);
  Object.assign(form, mockData);
};

// 提交表单
const submitForm = async () => {
  try {
    await formRef.value.validate();
    // if (route.params.id != "add") {
    // await resourceinfoUpdate({
    //   resId: id.value,
    //   resName: form.resName,
    //   resDes: form.resDes,
    //   resType: form.resType,
    //   dynamic: form.dynamic,
    // });
    // }
    if (form.dynamic == 1) {
      await dynamicsNatRef.value.saveData();
    } else {
      await resourceinfosaveText({
        resId: id.value,
        resText: form.resText,
      });
    }
    await resourceinfoUpdate({
      resId: id.value,
      resName: form.resName,
      resDes: form.resDes,
      resType: form.resType,
      dynamic: form.dynamic,
    });
    // API请求
    router.push({
      name: "office-naturalRes",
    });
  } catch (error) {
    console.log("表单验证失败", error);
  }
};

// 运行动态资源
const runForm = async () => {
  try {
    await formRef.value.validate();
    // if (route.params.id != "add") {
    // }
    if (form.dynamic == 1) {
      await dynamicsNatRef.value.saveData();
    } else {
      await resourceinfosaveText({
        resId: form.resId,
        resText: form.resText,
      });
    }
    await resourceinfoUpdate({
      resId: id.value,
      resName: form.resName,
      resDes: form.resDes,
      resType: form.resType,
      dynamic: form.dynamic,
    });
    loadUserData();
  } catch (error) {
    console.log("表单验证失败", error);
  }
};

const handleClick = (id) => {
  // id.value = id;
  form.resId = id;
};

// 取消编辑
const cancel = () => {
  router.push({
    name: "office-naturalRes",
  });
};
</script>

<style scoped>
.user-edit-container {
  padding: 20px;
}
.button-row {
  display: flex;
  justify-content: flex-end; /* 右对齐 */
  width: 100%;
  margin: 10px 0;
}

.button-row button {
  padding: 6px 12px;
  /* background: #42b983; */
  /* color: white; */
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
